<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<!--<script src="static/js/jquery-1.11.2.min.js"></script>-->
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>产品</th>
                        <th>交付时间</th>
                        <th>状态 </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>TB - Monthly</td>
                        <td>01/04/2012</td>
                        <td>Default</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    var websocket = null;
    if('websocket' in window){
        websocket = new WebSocket('ws://localhost:8086/webSocket');
    }else{
        alert("该浏览器不支持websocket！");
    }

    websocket.onopen = function (event) {
        console.log('建立连接');
    }

    websocket.onclose = function (event) {
        console.log('关闭连接');
    }

    websocket.onmessage = function (event) {
        console.log('收到消息：' + event.data);
        //弹窗提醒、播放音乐
    }

    websocket.onerror = function (event) {
        alert('websocket通信发生错误！');
    }

    //窗口关闭时关闭wevsocket
    websocket.onbeforeunload = function (event) {
        websocket.close();
    }


</script>

</body>
</html>
